﻿@{
    ViewBag.Title = "Quản lý tiến độ tổng điều tra";
    ViewBag.Root = "Quản lý tiến độ";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<link href="~/Content/index.css" rel="stylesheet" />
<link href="~/Content/standard_form_nhaplieu.css" rel="stylesheet" />

<link href="@Url.Content("~/Content/jquery-ui.1.10.2.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.maskedinput.js")"></script>
<script src="@Url.Content("~/Scripts/khasinh.js")"></script>
<script>
    var districtCaption = "--- Chọn quận, huyện ---";
    var communeCaption = "--- Chọn xã, phường ---";
    var areaCaption = "--- Chọn địa bàn ---";
    var provinceId = "PROVINCE_CODE";
    var districtId = "DISTRICT_CODE";
    var communeId = "COMMUNE_CODE";
    var surveyMethodId = "SURVEY_METHOD";
    var areaId = "AREA_ID";
    var btnResult = "btnResult";

    function datePicker() {
        var option = {
            //dayNamesMin: ["CN", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7"],
            dayNamesMin: ["CN", "2", "T3", "T4", "T5", "T6", "T7"],
            monthNames: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5",
                "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
            dateFormat: "dd/mm/yy",
            onSelect: function (selectedDate) {
                //alert(selectedDate);
                removeResult();
            }
        };

        $("#START_DATE").mask("99/99/9999", {placeholder : "dd/mm/yyyy"});
        $("#START_DATE").datepicker(option);
        $("#END_DATE").datepicker(option);
        $("#END_DATE").mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
    }

    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }


    function btnResult_click() {
        if (!validation()) {
            return;
        }
        var surveyMethod = $("#" + surveyMethodId).val();
        var provinceCode = $("#" + provinceId).val();
        var districCodeValue = getCode($("#" + districtId).val());
        var districtCode = districCodeValue[1];
        var communeCodeValue = getCode($("#" + communeId).val());
        var communueCode = communeCodeValue[1];
        var areaCode = $("#" + areaId).val();        
        var onlineValue = getSurveyMethodValue("chkOnline", "01");
        var tabletValue = getSurveyMethodValue("chkTablet", "02");
        var pageValue = getSurveyMethodValue("chkPage", "03");
        var endDate = "";
        if (isEmpty("END_DATE")) {
            endDate = getDateNowString();
        }
        else endDate = $("#END_DATE").val();
             

        $("#divLoading").show();        
        var ajax = $.ajax({
            cache: false,            
            url: '@Url.Action("ChartResult")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: JSON.stringify({
                obj:
                    {
                        ProvinceID: provinceCode,
                        DistrictID: districtCode,
                        CommuneID: communueCode,
                        AreaID: areaCode,
                        OnlineSurvey: onlineValue,
                        TabletSurvey: tabletValue,
                        PageSurvey: pageValue,
                        Start_Date: $("#START_DATE").val(),
                        End_Date: endDate                        
                    }
            }),
            success: function (dataResult) {
                $("#result").html(dataResult);
            },
            error: function (ex) {
                alert("Co loi xay ra: \n" + JSON.stringify(ex));
            },
            complete: function () {
                $("#divLoading").hide();
                window.scrollTo(0, document.body.scrollHeight);
                
            }
        });
    }

    $(document).ready(function () {
        
        datePicker();
        
        preventSelect([districtId, communeId, areaId, btnResult]);

        $("#START_DATE").on("keyup", function () {
            document.getElementById("startDateError").innerHTML = "";
        });

        $("#END_DATE").keyup(function () {
            document.getElementById("endDateError").innerHTML = "";
        });

        $("#PROVINCE_CODE").on("change", function () {
            loadDistrict();
        });

        $("#DISTRICT_CODE").on("change", function () {
            loadCommune();
        });

        $("#COMMUNE_CODE").on("change", function () {
            loadArea();
        });

        $("#" + areaId).on("change", function () {
            removeResult();
        });

        $("#" + btnResult).on("click", btnResult_click);
    });

    function isValidDate(dateId, msgErrorId) {
        var txtDate = $("#" + dateId).val();
        var errorCode = isDate(txtDate);
        if (errorCode == 0) {
            return true;
        }       
        messgeError(msgErrorId, errorCode);

        return false;
    }

    function hasSurveyMethod() {
        var online = $("#chkOnline").is(':checked');
        var tablet = $("#chkTablet").is(':checked');
        var page = $("#chkPage").is(':checked');

        if (online || tablet || page) {
            return true;
        }

        return false;
    }

    function validation() {

        if (startDateEmpty()) {
            return false;
        }

        if (!isValidDate("START_DATE", "startDateError")) {
            return false;
        }

        if (isEmpty("END_DATE")) {            
            if (dateNotValid($("#START_DATE").val(), getDateNowString())) {
                alert("Thời gian bắt đầu phải nhỏ hơn ngày hiện tại.");
                return false;
            }           
        }
        else {
            if (!isValidDate("END_DATE", "endDateError")) {
                return false;
            }

            if (dateNotValid($("#START_DATE").val(), $("#END_DATE").val())) {
                alert("Thời gian bắt đầu phải nhỏ hơn thời gian kết thúc.");
                return false;
            }          
        }

        if (!hasSurveyMethod()) {
            alert("Chưa chọn phương thức điều tra.");
            return false;
        }

        return true;
    }

    function dateNotValid(startDate, endDate) {        
        var dStart = getDate(startDate);        
        var dEnd = getDate(endDate);
        if (!startDateLessThanEndDate(dStart, dEnd)) {            
            return true;
        }

        return false;
    }

    function isEmpty(id) {
        if ($("#" + id).val() == "") {            
            return true;
        }

        return false;
    }

    function getDateNowString() {
        var dateNow = new Date();
        var d = dateNow.getDate() + "/" + (dateNow.getMonth() + 1) + "/" + dateNow.getFullYear();

        return d;
    }

    function startDateEmpty() {
        if (isEmpty("START_DATE")) {
            alert("Chưa nhập thời gian bắt đầu.");
            return true;
        }

        return false;
    }

    function startDateLessThanEndDate(dStart, dEnd) {
        if (dStart <= dEnd) {
            return true;
        }

        return false;
    }

    function getDateArray(d) {
        var ds = d.split("/");
        var a = new Array();
        a["dd"] = parseInt(ds[0]);
        a["mm"] = parseInt(ds[1]);
        a["yy"] = parseInt(ds[2]);

        return a;
    }
    
    function getDate(date) {
        var dateArray = getDateArray(date);
        var d = new Date(dateArray["yy"], dateArray["mm"], dateArray["dd"]);        

        return d;
    }

    function getDateFormatString() {
        var d = new Date(2015, 12, 25);        
        var dtString = d.toLocaleDateString();
        var splitter = "/";
        if (dtString.indexOf("-") != -1) {
            splitter = "-"
        }
        var arrDate = dtString.split(splitter);
        
        if (arrDate.length >= 3) {

        }
    }

    function getSurveyMethodValue(id, value) {
        if ($("#" + id).is(':checked')) {
            return value;
        }

        return "";
    }

    function fillData(id, dataItems) {        
        var parent = $("#" + id);
        $.each(dataItems, function (i, item) {
            parent.append(
                $('<option>', {
                    value: item.Value,
                    text: item.Text
                }, '<option/>'));
        });
    }

    function preventSelect(ids) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).attr('disabled', 'disabled');
        }
    }

    function rightSelect(ids) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).removeAttr('disabled');
        }
    }

    function fillDefaultValue(vals, ids) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).
                append('<option value ="">' +
                            vals[i] +
                       '</option>');
        }
    }

    function removeAll(ids) {
        for (var i = 0; i < ids.length; i++) {
            $("#" + ids[i]).empty();
        }
    }

    function getCode(value){

        var result = value.split(";");
        
        return result;
    }

    function loadDistrict(){
        if ($("#" + provinceId).val() == "") {
            removeAll([districtId, communeId, areaId]);
            fillDefaultValue([districtCaption, communeCaption, areaCaption],
                                [districtId, communeId, areaId]);            
            preventSelect([districtId, communeId, areaId, btnResult]);
            return;
        }
        removeAll([districtId, communeId, areaId]);
        fillDefaultValue([communeCaption, areaCaption],
                                [communeId, areaId]);
        preventSelect([communeId, areaId]);
        $("#divLoading").show();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetData")',
            dataType: 'json',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: {
                code: $("#" + provinceId).val(),
                level: '2'
            },
            success: function (dataItems) {                
                fillData(districtId, dataItems);
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + JSON.stringify(ex));
            },
            complete: function () {                
                rightSelect([provinceId, districtId, btnResult]);
                $("#divLoading").hide();
            }
        }).always(function () {
            $("#divLoading").hide();
            removeResult();
        });
    }

    function loadCommune() {
        if ($("#" + districtId).val() == "") {
            removeAll([communeId, areaId]);
            fillDefaultValue([communeCaption, areaCaption], [communeId, areaId]);
            preventSelect([communeId, areaId]);
            return;
        }
        removeAll([communeId, areaId]);
        fillDefaultValue([areaCaption], [areaId]);
        preventSelect([areaId]);
        var arrCode = getCode($("#" + districtId).val());
        var adminCode = arrCode[0];
        $("#divLoading").show();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetData")', // we are calling json method
            dataType: 'json',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: {
                code: adminCode,
                level: '3'
            },
            success: function (dataItems) {
                fillData(communeId, dataItems);
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            },
            complete: function () {                
                rightSelect([communeId]);
                $("#divLoading").hide();
            }
        }).always(function () {
            $("#divLoading").hide();
            removeResult();
        });
    }

    function loadArea() {
        if ($("#" + communeId).val() == "") {
            removeAll([areaId])
            fillDefaultValue([areaCaption], [areaId]);
            preventSelect([areaId]);
            return;
        }        
        removeAll([areaId]);
        var arrCode = getCode($("#" + communeId).val());
        var adminCode = arrCode[0];
        $("#divLoading").show();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetData")',
            dataType: 'json',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: {
                code: adminCode,
                level: '4'
            },
            success: function (dataItems) {
                fillData(areaId, dataItems);
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + JSON.stringify(ex));
            },
            complete: function () {                
                rightSelect([areaId]);
                $("#divLoading").hide();
            }
        }).always(function () {
            $("#divLoading").hide();
            removeResult();
        });
    }

    function removeResult() {
        $("#result").html("");
    }
</script>

<script src="~/Scripts/armchart.js" type="text/javascript"></script>
<script src="~/Scripts/pie.js" type="text/javascript"></script>
<script src="~/Scripts/light.js" type="text/javascript"></script>

<div class="page-bar">
    <ul class="page-breadcrumb" style="padding: 4px;">
        <li>
            <i class="fa fa-home"></i>
            <a href="#"> Quản lý tiến độ tổng điều tra</a>
        </li>
    </ul>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="row" style="margin-top:10px;">
            @Html.Label("Tỉnh/TP: ", new { @class = "col-md-2 col-sm-2 col-xs-3" })
            <div class="col-md-10 col-sm-10 col-xs-9">
                @Html.DropDownList("PROVINCE_CODE", ViewBag.Groups as List<SelectListItem>, new { @class = "form-control" })
            </div>
        </div>
        <div class="row" style="margin-top:10px;">
            @Html.Label("Quận/Huyện: ", new { @class = "col-md-2 col-sm-2 col-xs-3" })
            <div class="col-md-10 col-sm-10 col-xs-9">
                @Html.DropDownList("DISTRICT_CODE", new SelectList(string.Empty, "Value", "Text"),
                                                    "--- Chọn quận, huyện ---", new { @class = "form-control" })
            </div>
        </div>
        <div class="row" style="margin-top:10px;">
            @Html.Label("Xã/Phường: ", new { @class = "col-md-2 col-sm-2 col-xs-3" })
            <div class="col-md-10 col-sm-10 col-xs-9">
                @Html.DropDownList("COMMUNE_CODE", new SelectList(string.Empty, "Value", "Text"),
                                                            "--- Chọn xã, phường ---", new { @class = "form-control" })
            </div>

        </div>
        <div class="row" style="margin-top:10px;">
            @Html.Label("Địa bàn: ", new { @class = "col-md-2 col-sm-2 col-xs-3" })
            <div class="col-md-10 col-sm-10 col-xs-9">
                @Html.DropDownList("AREA_ID", new SelectList(string.Empty, "Value", "Text"),
                                                            "--- Chọn địa bàn ---", new { @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row" style="margin-top:10px;">
            @Html.Label("Thời gian bắt đầu: ", new { @class = "col-md-2 col-sm-2 col-xs-3" })
            <font size="3" color="red" class="col-md-1 col-sm-1 col-xs-1">*</font>
            <div class="col-md-9 col-sm-9 col-xs-8">
                @Html.TextBox("START_DATE", null, new { @class = "form-control" })
                <span id="startDateError"></span>
            </div>
        </div>
        <div class="row" style="margin-top:10px;">
            @Html.Label("Thời gian kết thúc: ", new { @class = "col-md-3 col-sm-3 col-xs-4" })            
            <div class="col-md-9 col-sm-9 col-xs-8">
                @Html.TextBox("END_DATE", null, new { @class = "form-control" })
                <span id="endDateError"></span>
            </div>
        </div>

        <div class="row" style="margin-top:10px;">
            @Html.Label("Phương thức điều tra: ", new { @class = "col-md-3 col-sm-3 col-xs-4" })
            <div class="col-md-9 col-sm-9 col-xs-8">
                <div style="display:inline; white-space:nowrap; margin-right:10px;">
                    @Html.CheckBox("chkOnline", true, new { @value = "01" })
                    @Html.Label("", "Điều tra Online", new { @for = "chkOnline" })
                </div>
                <div style="display: inline; white-space: nowrap; margin-right: 10px; ">
                    @Html.CheckBox("chkTablet", false, new { value = "02" })
                    @Html.Label("", "Điều tra Tablet", new { @for = "chkTablet" })
                </div>
                <div style="display: inline; white-space: nowrap;">
                    @Html.CheckBox("chkPage", false, new { value = "03" })
                    @Html.Label("", "Điều tra Giấy", new { @for = "chkPage" })

                </div>
            </div>
        </div>

        <div class="row" style="margin-top:10px;">
            <div class="col-md-12" style="text-align:right;">
                <button id="btnResult" class="btn  btn-md btn-default"><i class="fa fa-bar-chart-o"></i> Kết quả</button>
            </div>
        </div>
    </div>
</div>
    
<div id="result" style="clear:both;">
        
</div>
<br /><br />
<a href="#" id="position"></a>

